import { useEcharts } from "@/hooks/useEcharts";
import { EChartsOption } from "echarts";
import IconSvg from "@/components/IconSvg";
import "./index.less";
export const Index = () => {
  const optionPageView: EChartsOption = {
    grid: {
      top: "15%",
      left: "6%",
      bottom: "8%",
      right: "6%",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  const optionOnlineView: EChartsOption = {
    grid: {
      top: "15%",
      left: "6%",
      bottom: "8%",
      right: "6%",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };

  const [pageViews] = useEcharts(optionPageView);
  const [onlineViews] = useEcharts(optionOnlineView);

  return (
    <div className="Index pageWarpper">
      {/* 分类 */}
      <div className="info-box">
        <div className="info-box-item">
          <div className="info-box-item-top">用户人数</div>
          <div className="info-box-item-bottom">
            <div className="info-box-item-bottom-left">
              <IconSvg style={{ fontSize: "60px" }} name="user" />
            </div>
            <div className="info-box-item-bottom-right">1000</div>
          </div>
        </div>
        <div className="info-box-item">
          <div className="info-box-item-top">用户人数</div>
          <div className="info-box-item-bottom">
            <div className="info-box-item-bottom-left">
              <IconSvg style={{ fontSize: "60px" }} name="user" />
            </div>
            <div className="info-box-item-bottom-right">1000</div>
          </div>
        </div>
        <div className="info-box-item">
          <div className="info-box-item-top">用户人数</div>
          <div className="info-box-item-bottom">
            <div className="info-box-item-bottom-left">
              <IconSvg style={{ fontSize: "60px" }} name="user" />
            </div>
            <div className="info-box-item-bottom-right">1000</div>
          </div>
        </div>
        <div className="info-box-item">
          <div className="info-box-item-top">用户人数</div>
          <div className="info-box-item-bottom">
            <div className="info-box-item-bottom-left">
              <IconSvg style={{ fontSize: "60px" }} name="user" />
            </div>
            <div className="info-box-item-bottom-right">1000</div>
          </div>
        </div>
      </div>
      {/* 可视化 */}
      <div className="echarts-box">
        <div className="echarts-box-item">
          <div className="echarts-box-item-top">访问量</div>
          <div className="echarts-box-item-bottom" ref={pageViews}></div>
        </div>
        <div className="echarts-box-item">
          <div className="echarts-box-item-top">在线用户</div>
          <div className="echarts-box-item-bottom" ref={onlineViews}></div>
        </div>
      </div>
      {/* 系统简介 */}
      <div className="system-box"></div>
    </div>
  );
};

export default Index;
